<template>
	<div class="home">
		<el-container>
			<el-aside width="auto">
				<el-menu
					class="el-menu-vertical"
					:unique-opened="false"
					background-color="#343434"
					:router="true"
					:collapse="iscollapse"
					:default-active="defaultActive"
					text-color="#757575"
					style="border: none;"
					active-text-color="#fff"
					@open="handleOpen"
					@close="handleClose"
					@select="handleSelect"
				>
					<div class="header"><h3 style="color: white;">数据分析</h3></div>
					<el-submenu v-for="item in elmenus" :key="item.index" :index="item.index">
						<template slot="title">
							<i :class="item.icon"></i>
							<span slot="title">{{ item.title }}</span>
							<span class="hot">HOT</span>
						</template>
						<template v-if="item.child">
							<el-menu-item v-for="citem in item.child" :key="citem.index" :index="citem.index" :route="citem.path">
								<span>{{ citem.title }}</span>
							</el-menu-item>
						</template>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-container>
				<el-header style="background-color: #414141; margin: 0; padding: 0;">
					<el-row>
						<el-col :span="4">
							<div class="header-item">
								<span style="color: white;margin: 0 10px;font-size: 10px;">微博版</span>
								<span style="width: 1px;height: 14px;background-color: lightgray;"></span>
								<span style="color: #757575;margin: 0 10px;font-size: 10px;">公众号</span>
						    </div>
						</el-col>
						<el-col :span="8"><div class="header-item"></div></el-col>
						<el-col :span="8"><div class="header-item"></div></el-col>
						<el-col :span="2">
							<div class="header-item">
								<el-badge is-dot class="item"><i style="font-size: 30px; color: white;" class="el-icon-bell"></i></el-badge>
							</div>
						</el-col>
						<el-col :span="2">
							<div class="header-item">
								<el-dropdown>
									<span class="el-dropdown-link">
										<el-avatar style="float: right;" :src="imgUrl"></el-avatar>
										<i style="font-size: 20px; color: white;" class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item><span>个人信息</span></el-dropdown-item>
										<el-dropdown-item><span>修改密码</span></el-dropdown-item>
										<el-dropdown-item><span @click="toLogin">退出登录</span></el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</div>
						</el-col>
					</el-row>
				</el-header>
				<el-main style="padding: 0;background-color: white;">
					<keep-alive v-if="$route.meta.keepAlive">
						<router-view></router-view>
					</keep-alive>
					<router-view v-else></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
export default {
	data() {
		return {
			elmenus: [
				{
					index: '1',
					icon: 'el-icon-menu',
					title: '分析数据',
					child: [
						{
							index: '1-1',
							title: '数据分析',
							path: '/datas'
						},
						{
							index: '1-2',
							title: '图表分析',
							path: 'chart'
						}
					]
				}
			],
			defaultActive: '1',
			iscollapse: false,
			imgUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
		};
	},
	methods: {
		initFrams() {
			if (!sessionStorage.getItem('token')) {
				this.$msg.warning("请先登录！");
				this.$router.push('/login');
			} else {
				this.$msg.success("登录成功！");
			}
		},
		handleOpen(key, keyPath) {
			// console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
			// console.log(key, keyPath);
		},
		handleSelect(key, keyPath) {
			// console.log(key, keyPath);
		},
		toLogin() {
			if (sessionStorage.getItem('token')) {
				sessionStorage.removeItem('token');
			}
			this.$router.push('/login');
		}
	},
	created() {
		//this.initFrams();
	},
	watch: {
		$route() {
			if (this.$route.name == "数据") {
				this.defaultActive = "1-1";
			} else if (this.$route.name == "图表") {
				this.defaultActive = "1-2";
			}
		}
	}
};
</script>

<style scoped="scoped">
.home {
	width: 100%;
	height: 100vh;
	display: flex;
	position: relative;
}

.hot {
	color: white;
	background-color: #ff9064;
	padding: 1px 5px;
	margin-left: 10px;
	border-radius: 10px;
	font-size: 12px;
}

.circle {
	width: 5px;
	height: 5px;
	background-color: white;
	border-radius: 50%;
}

.el-menu-vertical:not(.el-menu--collapse) {
	width: 200px;
}

.el-menu-item {
}

.el-menu-item:hover {
}

.el-menu-item.is-active {
	color: #343434;
	background-color: #494949 !important;
}

.el-aside {
	background-color: #343434 !important;
	height: 100vh;
}

.header {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 60px;
	background-color: #343434;
	flex-direction: row;
}

.header-item {
	display: flex;
	align-items: center;
	width: 100%;
	height: 60px;
}

.el-dropdown-link {
	display: flex;
	flex-direction: row;
	align-items: center;
}
</style>
